
<template>
  <div class="app-container app-container-table">
    <el-row style="height:100%;">
      <el-col
        :span="4"
        style="border:1px solid #ccc;height:100%;overflow: scroll;background: #fff;"
      >
        <el-tree
          :data="menueList"
          @node-click="handleNodeClick"
          :props="defaultProps"
          class="filter-tree el-slide"
          :default-expand-all="true"
          node-key="kmTreeId"
          ref="tree"
          :expand-on-click-node="false"
          highlight-current
        ></el-tree>
        <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
      </el-col>
      <el-col :span="20" style="height:100%;overflow: scroll;background: #fff;">
        <one-table-template
          ref="multipleTable"
          :dynamicSearchField="placeHolder"
          :dynamicSearchResult="searchResult"
          :dynamicButtons="tableButtons"
          :dynamicButtonsRight="tableButtonsRight"
          :dynamicComponents="tableComponents"
          :dynamicApiConfig="apiConfig"
          :dynamicTableCols="tableCols"
          :dynamicFormFields="formField"
          :dynamicIsShowSelect="false"
          :dynamicIsInitTable="false"
          :dynamicIsColumnDrop="false"
        />

        <el-radio-group v-model="radioMD" size="small" @change="handleLDMD">
          <el-radio-button
            v-for="itm in radListLDMD"
            :label="itm.lookupValueName"
            :key="itm.lookupValueCode"
          >{{itm.lookupValueName}}</el-radio-button>
        </el-radio-group>

        <div class="filter-container filter-params">
          <el-form ref="form">
            <el-row style="margin-bottom:10px;" v-for="(item,index) in pageList" :key="index">
              <div class="pageCSS" @click="itemClick(item,index)">
                <span v-html="item.kmName"></span>
                <span v-html="item.createdDate"></span>
                <span v-html="item.kmContents"></span>
              </div>
            </el-row>
            <el-row>
              <el-pagination
                v-show="FYKJ.total!=0"
                background
                layout="prev, pager, next"
                :total="FYKJ.total"
                :page-size="FYKJ.pagesize"
                :current-page="FYKJ.pageindex"
                @prev-click="prev"
                @next-click="next"
                @current-change="changepage"
              ></el-pagination>
            </el-row>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <Edit
      ref="fkPage"
      :dynamicEditRowData="editRowData"
      :popupsVisible="editPopupsVisible"
      :key="editPopupsKey"
      :popupsState="editPopupsState"
      @close="close"
    />
  </div>
</template>
<script>
import { crmApis } from "@/api/apiList/crm";
import { orgApis } from "@/api/apiList/org";
import { requestAPI } from "@/api/commonRequest";
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import OneTableTemplate from "@/components/crm/Template/crmonePagets";
import Edit from "./edit";
import Vue from "vue";

export default {
  name: "knowledgeSearchResult",
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  components: {
    OneTableTemplate,
    Edit
  },
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(to.path, function() {
      next();
    });
  },
  data() {
    return {
      menueList:[],
      listQuery: {
        // oemCode:"1",
        // groupCode:"1"
      },
      defaultProps: {
        children: "children",
        label: "kmTreeName"
      },
      FYKJ: {
        total: 0,
        pagesize: 10,
        pageindex: 1
      },
      radioMD: "最新",
      radListLDMD: [
        {
          lookupValueCode: "1",
          lookupValueName: "最新"
        },
        {
          lookupValueCode: "2",
          lookupValueName: "最热"
        },
        {
          lookupValueCode: "3",
          lookupValueName: "评价"
        }
      ],
      activeName: "first",
      pageList: [],
      queryParam: "",
      placeHolder: `关键字`,
      searchResult: "",
      // 网格查询API配置对象
      apiConfig: crmApis.kmInfoQuerySearch,
      tableButtonsRight: [
        {
          compKey: "btnKey10000",
          type: "",
          icon: "el-icon-search",
          size: "small",
          clickEvent: () => this.query(),
          text: "查询"
        },
        {
          compKey: "btnKey10001",
          type: "",
          size: "small",
          icon: "el-icon-refresh",
          clickEvent: () => this.reset(),
          text: "重置"
        },
        {
          compKey: "btnKey10002",
          type: "",
          size: "small",
          icon: "iconfont icon-newlyAdded",
          clickEvent: () => this.adfk(),
          text: "反馈"
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
              .tableComponents
          : [
              {
                compKey: "compKey1",
                labelName: "关键字",
                codeField: "keyWord",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: false,
                isRequire: true
              },
              {
                compKey: "compKey2",
                labelName: "知识模板",
                codeField: "templateId",
                textField: "templateName",
                lookuptype: crmApis.kmTemplateQueryFindAll,
                // extralParams:{classLevel:10,serverType:this.serverType},//参数
                changeCode:this.getTemplate,
                component: () =>
                  import("@/components/crm/lookupValue/apiDropList"),
                type: "dropdownList",
                isMust: false,
                isMul: false
              },
              // {
              //   compKey: "compKey2",
              //   labelName: "知识模板",
              //   codeField: "kmTemplateId",
              //   lookuptype: "KN0003",
              //   component: () => import("@/components/org/LookupValue"),
              //   type: "dropdownList",
              //   isMust: false,
              //   isMul: false
              // },
              {
                compKey: "compKey3",
                labelName: "创建时间",
                codeField: "startTime,endTime",
                component: () =>
                  import("@/components/crm/Time/crmdtDatePickerts"),
                type: "inputText",
                isMust: false
              },
              {
                compKey: "compKey4",
                labelName: "过滤词",
                codeField: "notContains",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: false
              },
              {
                compKey: "compKey5",
                labelName: "搜索位置",
                codeField: "searchPlace",
                lookuptype: "KN0009",
                component: () =>
                  import("@/components/crm/lookupValue/checkBoxList"),
                type: "dropdownList",
                isMust: false,
                span: 18
              },
              {
                compKey: "compKey6",
                labelName: "是否过期",
                codeField: "isOutTime",
                lookuptype: "DB0064",
                component: () => import("@/components/org/LookupValue"),
                type: "dropdownList",
                isMust: false,
                isMul: false
              }
            ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [],
      // 表单查询数据--重置查询条件
      formField: {
        keyWord: "",
        kmTemplateId: "",
        startTime: "",
        endTime: "",
        notContains: "",
        isKmName: "",
        isKmContents: "",
        isFileContents: "",
        isFileName: "",
        isOutTime: "",
        searchPlace: "",
        sort: ""
      },
      editPopupsKey: "",
      editPopupsState: "",
      editPopupsVisible: false
    };
  },
  created() {
    // this.getlLstQuery()
    this.queryMenue();
  },
  mounted() {},
  methods: {
    getTemplate(val){
      this.formField.kmTemplateId=val
    },
    query() {
      if (this.queryParam) {
        this.formField.keyWord = this.queryParam;
      }
      if (!this.formField.keyWord) {
        this.$message({
          message: "请输入关键字",
          type: "warning"
        });
      } else {
        this.getKMData();
      }
    },
    prev() {
      let that = this;
      if (this.FYKJ.pageindex > 1) {
        that.FYKJ.pageindex = this.FYKJ.pageindex - 1;
        this.query();
      }
    },
    next() {
      let that = this;
      if (true) {
        that.FYKJ.pageindex = this.FYKJ.pageindex + 1;
        this.query();
      }
    },
    changepage(index) {
      let that = this;
      that.FYKJ.pageindex = index;
      this.query();
    },
    handleLDMD(val) {
      let that = this;
      //that.BCldmd = val;
    },
    getKMData() {
      let that = this;
      that.formField.sort = "";
      if (this.radioMD) {
        if (this.radioMD == "最新") {
          that.formField.sort = "";
        }
        if (this.radioMD == "最热") {
          that.formField.sort = "";
        }
        if (this.radioMD == "评价") {
          that.formField.sort = "";
        }
      }
      let queryObj = {
        // api配置
        apiConfig: crmApis.kmInfoQuerySearch,
        // 需要调用的API服务配置
        apiServices: [
          {
            //表格中台返回网格的字段
            apiQueryRow: [
              "createdDate",
              "createdName",
              "fileContents",
              "isOutTime",
              "kmContents",
              "kmFileName",
              "kmFilePath",
              "kmId",
              "kmName"
            ]
          }
        ],
        //条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          pageSize: that.FYKJ.pagesize,
          pageIndex: that.FYKJ.pageindex,
          //当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: {
            keyWord: that.formField.keyWord,
            notContains: that.formField.notContains,
            kmTemplateId: that.formField.kmTemplateId,
            startTime: that.formField.startTime,
            endTime: that.formField.endTime,
            searchPlace: that.formField.searchPlace,
            treeId: that.formField.treeId,
            isOutTime: that.formField.isOutTime,
            sort: that.formField.sort
          }
        }
      };
      //转换了中台请求格式数据
      var paramD = that.$getParams(queryObj);
      // 调用中台API方法（可复用）
      requestAPI(paramD).then(response => {
        if (response.result == "1") {
          that.FYKJ.pageindex =
            response.pageindex;
          that.FYKJ.total =
            response.records;
          let results = response.rows;
          that.pageList = [];
          if (results != null) {
            for (var j = 0; j < results.length; j++) {
              var aObj = {};
              aObj["createdDate"] = results[j].createdDate;
              aObj["createdName"] = results[j].createdName;
              aObj["fileContents"] = results[j].fileContents;
              aObj["isOutTime"] = results[j].isOutTime;
              aObj["kmContents"] = results[j].kmContents;
              aObj["kmFileName"] = results[j].kmFileName;
              aObj["kmFilePath"] = results[j].kmFilePath;
              aObj["kmId"] = results[j].kmId;
              if (results[j].isOutTime == "1") {
                aObj["kmName"] = results[j].kmName + "(知识已过期)";
              } else {
                aObj["kmName"] = results[j].kmName;
              }
              that.pageList.push(aObj);
            }
          }
        }
      });
    },
    adfk() {
      var rowData = {};
      rowData["feedbackTitle"] = this.formField.keyWord;
      this.editRowData = rowData;
      this.editPopupsState = "edit";
      this.editPopupsVisible = true;
      this.editPopupsKey = this.$utils.generateId();
    },
    //点击树
    handleNodeClick(objectNode){
      console.log(objectNode)
      this.formField.treeId=objectNode.kmTreeId
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //抢单
    edit(index) {
      // if (this.$refs.multipleTable.list[index].processingAction == 0) {
      let queryObj = {
        //api配置
        type: "mutation",
        //维护api缺失
        // apiConfig: crmApis.clueServerMutationGetBill,
        apiConfig: crmApis.csBuMyTaskMutationQing,
        //需要调用的api服务配置
        apiServices: [
          {
            //表格中台返回网格的字段
            apiQueryRow: []
          }
        ],
        //条件/实体参数（变量），根据typeprarm中的定义配置
        variables: {
          dataInfo: {
            taskId: this.$refs.multipleTable.list[index].taskId
          }
        }
      };
      //转换了中台请求格式数据
      var paramD = this.$getParams(queryObj);
      requestAPI(paramD).then(response => {
        if (
          response.result == "1" &&
          response.rows != ""
        ) {
          this.$message({
            message: "抢单成功",
            type: "success",
            duration: 1000
          });
          (this.updateControlId = ""), this.query();
          // this.tabledatas.tabledata =
          //   response.rows;
        } else {
          this.$message({
            message: response.msg,
            type: "fail",
            duration: 1000
          });
        }
      });
      // else {
      //   //that.$router.push({ name: "", params: row });
      //   this.$crmcf.jumpDetailTag(
      //     this,
      //     "crmThreadReturn",
      //     "/crmThreadReturn",
      //     this.$refs.multipleTable.list[index]
      //   );
      // }
    },
    // 知识目录查询
    queryMenue(page) {
      let that = this;
      let queryObj = {
        // api配置
        apiConfig: crmApis.kmTreeInfoQueryDirectory,
        // 需要调用的API服务配置
        apiServices: [
          {
            //表格中台返回网格的字段
            apiQueryRow: [
              "kmTreeId",
              "kmTreeName",
              "kmTreeParentId",
              "kmTreeType",
              "orderNo"
            ]
          }
        ],
        //条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          // pageSize: 10,
          // pageIndex: 1,
          //当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: {
            oemCode: "1",
            groupCode: "1"
          }
        }
      };
      //转换了中台请求格式数据
      var paramD = that.$getParams(queryObj);
      let csdata = {
        dataInfo: {
          oemCode: "1",
          groupCode: "1"
        }
      };
      that.$set(
        paramD,
        "query",
        "query{kmTreeInfoQueryDirectory{msg records result rows{kmTreeId kmTreeName kmTreeParentId kmTreeType orderNo}}}"
      );
      that.$set(paramD, "variables", csdata);
      // 调用中台API方法（可复用）
      requestAPI(paramD).then(response => {
        if (response.result == "1") {
          let results = response.rows;
          var tree = that.$utils.parseTreeFromList(
            results,
            "kmTreeParentId",
            "kmTreeId"
          );
          this.menueList = tree;
        }
      });
    },
    itemClick(item,index){
      this.$crmcf.jumpDetailTag(
        this,
        "crmKnowledgeView",
        "/crmKnowledgeView",
        {kmTempId:item.kmId}
      );
    },
  }
};
</script>
<style scoped>
.choosefile {
  float: left;
  text-align: left;
}
.pageCSS {
  position: relative;
  text-align: left;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.pageCSS:hover {
  cursor: pointer;
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.selectedClass {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.delete {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
